
<template>
  <div class="login-card">
    <!-- 1. 标题：粉色强调，与项目主题色一致 -->
    <h2>登录</h2>
    <!-- 2. 登录表单：@submit.prevent 阻止默认提交，调用 handleLogin 方法 -->
    <form @submit.prevent="handleLogin">
      <!-- 用户名输入项：v-model 双向绑定 data.username -->
      <div class="form-item">
        <label>用户名：</label>
        <input 
          v-model="username" 
          type="text" 
          placeholder="请输入用户名" 
          class="input-field"
        >
      </div>
      <!-- 密码输入项：v-model 双向绑定 data.password -->
      <div class="form-item">
        <label>密码：</label>
        <input 
          v-model="password" 
          type="password" 
          placeholder="请输入密码" 
          class="input-field"
        >
      </div>
      <!-- 3. 登录按钮：提交表单 → 触发 handleLogin -->
      <button type="submit" class="login-btn">登录</button>
      <!-- 4. 错误提示：v-if 条件渲染（登录失败时显示） -->
      <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
    </form>
  </div>
</template>
<script>
export default {
  name: 'LoginView', // 组件名称（调试/递归识别用）
  data() {
    return {
      username: '',   // 用户名（双向绑定输入框）
      password: '',   // 密码（双向绑定输入框）
      errorMsg: ''    // 错误提示信息（登录失败时显示）
    }
  },
  methods: {
    handleLogin() {
      // 🔥 步骤1：模拟登录验证（实际项目需调用后端接口）
      // 演示用固定账号：用户名 user，密码 123456
      if (this.username === '魔芋爽' && this.password === '123456') {
        // 🔥 步骤2：登录状态持久化（会话级存储，关闭标签页后失效）
        sessionStorage.setItem('isLoggedIn', 'true'); 
        // 🔥 步骤3：登录成功 → 跳转到记事本页面（/todo 路由）
        this.$router.push('/todo'); 
      } else {
        // 登录失败 → 显示错误提示
        this.errorMsg = '用户名或密码错误';
      }
    }
  }
}
</script>
<style scoped>
/* 🔹 登录卡片：控制宽度、居中、阴影、圆角（与项目整体风格一致） */
.login-card {
  max-width: 320px;        /* 卡片宽度，适配手机/平板 */
  margin: 80px auto;       /* 水平居中 */
  padding: 24px;           /* 内边距 */
  background: #fff;        /* 白色背景 */
  border-radius: 8px;      /* 圆角 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 浅阴影，增强层次感 */
}

/* 🔹 标题：粉色强调（与项目主题色 #ff6b81 统一） */
h2 {
  text-align: center;      /* 居中对齐 */
  color: #ff6b81;          /* 粉色标题 */
  margin-bottom: 20px;     /* 标题下方间距 */
}

/* 🔹 表单项：控制标签与输入框布局 */
.form-item {
  margin-bottom: 16px;     /* 表单项下方间距 */
}
.form-item label {
  display: block;          /* 标签块级显示（独占一行） */
  margin-bottom: 6px;      /* 标签下方间距 */
  color: #666;             /* 标签灰色（弱化视觉） */
}

/* 🔹 输入框：样式统一 + 聚焦交互 */
.input-field {
  width: 100%;             /* 输入框占满父容器宽度 */
  padding: 10px;           /* 内边距 */
  border: 1px solid #eee;  /* 浅灰边框 */
  border-radius: 4px;      /* 圆角 */
  outline: none;           /* 聚焦时无默认外框 */
}

/* 🔹 登录按钮：粉色主题 + hover 交互 */
.login-btn {
  width: 100%;             /* 按钮占满父容器宽度 */
  padding: 10px;           /* 内边距 */
  background: #ff6b81;     /* 粉色背景（项目主题色） */
  color: #fff;             /* 文字白色 */
  border: none;            /* 无边框 */
  border-radius: 4px;      /* 圆角 */
  cursor: pointer;         /* 鼠标悬浮变指针 */
  font-size: 16px;         /* 字号 */
  transition: background 0.3s; /* 背景色过渡动画（hover 时平滑变化） */
}
.login-btn:hover {
  background: #ff4757;     /* hover 时背景色变深粉（强调交互） */
}

/* 🔹 错误提示：红色强调 + 居中 */
.error {
  color: red;              /* 红色文字（强调错误） */
  text-align: center;      /* 居中对齐 */
  margin-top: 10px;        /* 顶部间距 */
}
</style>